<template>
    <view class="dx-load-more" :class="status === 'more' ? 'column' : ''" @click="onClick">
        <view class="more" v-show="status === 'loading'">
            <image class="loading" src="./images/loading.png" mode="widthFix"></image>
        </view>
        <view class="more" v-show="status === 'more'">
            <image class="arrow" src="./images/arrow.png" mode="widthFix"></image>
        </view>
        <text class="text" :style="{color: color}">{{ status === 'more' ? contentText.contentdown : status === 'loading' ? contentText.contentrefresh : contentText.contentnomore }}</text>
    </view>
</template>

<script>
    /**
     * LoadMore 加载更多
     * @description 用于列表中，做滚动加载使用，展示 loading 的各种状态
     * @property {String} status = [more|loading|noMore] loading 的状态
     * 	@value more loading前
     * 	@value loading loading中
     * 	@value noMore 没有更多了
     * @property {Object} contentText 各状态文字说明，值为：{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
     * @event {Function} clickLoadMore 点击加载更多时触发
     */
    export default {
        name: 'DxLoadMore',
        props: {
            status: {
                // 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
                type: String,
                default: 'more'
            },
            color: {
                type: String,
                default: '#62bb9d'
            },
            contentText: {
                type: Object,
                default () {
                    return {
                        contentdown: '继续上拉显示更多',
                        contentrefresh: '',
                        contentnomore: '本页内容已经展示完毕'
                    }
                }
            }
        },
        data() {
            return {}
        },
        methods: {
            onClick() {
                this.$emit('clickLoadMore', {
                    detail: {
                        status: this.status,
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .dx-load-more {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 30rpx 0;
        &.column {
            flex-direction: column;
        }
        .text {
            font-size: 32rpx;
        }
    }

    .more {
        line-height: 80rpx;
        text-align: center;
        font-size: 32rpx;
        color: #62bb9d;
        .loading {
            position: relative;
            width: 82rpx;
            -webkit-animation: rotate 2s linear 0s infinite both;
            animation: rotate 2s linear 0s infinite both;
        }
        .arrow {
            width: 60rpx;
            margin-bottom: 10rpx;
        }
    }
    @-webkit-keyframes rotate {
        0% {
            opacity: 1;
            -webkit-transform: rotate(0)
        }
        100% {
            opacity: 1;
            -webkit-transform: rotate(360deg)
        }
        }
        @keyframes rotate {
        0% {
            opacity: 1;
            transform: rotate(0)
        }
        100% {
            opacity: 1;
            transform: rotate(360deg)
        }
    }
</style>
